<template>
	<view class="">
		<view class="three_bang">
			<view class="w-100 position-absolute" style="height: 450rpx;">
				<image src="../../static/icon/three/sale.webp" mode="" class="img"></image>
			</view>
			<view class="w-100 flex justify-center">
				<view id='goods' class="bg-white rounded-lg position-relative pt-1"
					style="z-index: 10;top: 150rpx;width: 95%;">
					<!-- 排行榜的商品 -->
					<view class="mb-2 mx-2 flex" style="height:250rpx;" v-for="(item,index) in goods" :key="index"
						@click="productClick(item.Article_Name,item.Article_SerialNumber,item.Sales_Unit_Price_SerialNumber,item.Store_SerialNumber)">
						<view class="getvalue" :data-Article_Name="item.Article_Name"
							:data-Article_SerialNumber="item.Article_SerialNumber"
							:data-Sales_Unit_Price_SerialNumber="item.Sales_Unit_Price_SerialNumber">

						</view>
						<!-- 左侧商品图片 -->
						<view class="left" style="width:63%; height: 100%; background-color: #000;">
							<image :src="Domain_IMG+item.Picture_URL" mode="" class="img" alt=""></image>
						</view>
						<!-- 右侧商品信息 -->
						<view class="right ml-2 flex flex-column justify-between w-100">
							<view class="">
								<!-- 商品名 -->
								<view class="" style="font-size: 28rpx;">
									{{item.Article_Name}}
									<view class="font-sm" style="color: #ff720d;">
										**人种草
									</view>
								</view>
								<!-- 商品提示 -->
								<!-- <text class="" style="font-size: 20rpx; color: #ccc;">{{item.remark}}</text> -->
							</view>
							<view class="flex justify-between">
								<!-- 商品价格 -->
								<view class="flex align-center align-center">
									<!-- <view style="width: 28rpx; height: 28rpx;">
									<image :src="Domain_ICON+'/price.png'" mode="" class="img"></image>
								</view> -->
									<text style="color: green; font-size: 38rpx;line-height: 0;">
										￥{{item.specifications[0].Sales_Unit_Price}}
									</text>
								</view>
								<!-- 马上抢按钮 -->
								<view @click.stop="shopCart(item)">
									<view class="font rounded-circle flex justify-center align-center"
										style="background-color: green; color:white;width: 110rpx; height: 50rpx;">马上抢
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<sponsor bgHeight="120px"></sponsor>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import sponsor from "@/components/botsponsor/sponsor.vue"
	export default {
		components: {
			tabsTop,
			tabsBottom,
			sponsor,
		},
		data() {
			return {
				
				title: "", // 榜单名
				bgImgUrl: "", // 背景图
				goods: [], // 商品列表
				Domain_ICON: app.globalData.Domain_ICON,
				// Domain_IMGj:'../../static/icon'
			}
		},
		onLoad() {
			// var name=option
			//console.log(123);
			this.getData()
		},
		mounted() {
			this.getvalues('#goods .getvalue')
		},
		methods: {
			getData() {
				uni.request({
					url: 'http://127.0.0.1:5502/threebang.json',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					success: (res) => {
						this.goods = res.data.Data.goods;
						this.title = res.data.Data.name
						this.bgImgUrl = res.data.Data.img
						//console.log(res.data.Data);
					},
				})
			},

			// 获取表中数据
			getvalues(selector) {
				var arr1=[];
				const query = uni.createSelectorQuery().in(this);
				var ele = query.selectAll(selector);
				ele.fields({
					dataset: true,
					computedStyle: true,
					context: true
				}, (e) => { //   拿到节点中想要的键值对信息
					e.forEach(item => {
						arr1.push(item.dataset)
					})
					// this.obj[this.tabName] = this.arr1  // 需要表名就[表名]
					//console.log(arr1);
				}).exec()

			}
		}
	}
</script>

<style lang="scss" scoped>
	.three_bang {
		position: relative;
		padding-bottom: 300rpx;
	}
</style>